    <template>
        <div>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
                    <router-link :to="'/home/newsinfo/'+item.id" >
                        <img class="mui-media-object mui-pull-left" :src="item.img">
                        <div class="mui-media-body">
                            <h1>{{ item.title }}</h1>
                            <p class='mui-ellipsis'>
                                <span>发布时间：{{ item.add_time | dateFormat }}</span>
                                <span>点击.{{ item.click }}</span>
                            </p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </template>

    <script>
        import { Toast } from "mint-ui";

        export default {
            data (){
                return {
                    newslist:[]  //新闻列表
                };
            },
            created(){
                this.getNewList();
            },
            methods:{
                getNewList(){
                   // 获取新闻列表
                   this.$http.get('../../../static/getlunbo.json').then(result => {
                        if(result.body.status === 0){
                            // 如果保存成功，应该把结果保存到data上
                            this.newslist = result.body.message;
                        } else {
                            Toast("获取新闻列表失败！");
                        }
                   });
                }
            }
        }
    </script>

    <style lang="scss" scoped>
        .mui-table-view{
            li {
                h1 {
                    font-size:14px;
                }
                .mui-ellipsis {
                    display:flex;
                    font-size:12px;
                    color:#226aff;
                    justify-content: space-between;
                }
            }
        }
    </style>